<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F9F9F9',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F9F9F9',
		navigationBarTitleText: '共读记录',
	},
}
</route>
<template>
	<view class="page-bookrack">
		<view class="w-full flex flex-col box-border" :style="{ height: contentHeight + 'rpx' }">
			<view class="w-full px-4 py-4 box-border flex justify-between items-center">
				<view
					class="text-[36rpx] w-[50%] text-center relative"
					:style="{ color: tabKey === 'underway' ? '#303030' : '#ABABAB' }"
					@tap="changeTab('underway')"
				>
					倍阅共读记录
					<text
						v-if="tabKey === 'underway'"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[20rpx]"
						style="background: #34a4e2"
					></text>
				</view>
				<view
					class="text-[36rpx] w-[50%] text-center relative"
					:style="{ color: tabKey === 'over' ? '#303030' : '#ABABAB' }"
					@tap="changeTab('over')"
				>
					班级共读记录
					<text
						v-if="tabKey === 'over'"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[20rpx]"
						style="background: #34a4e2"
					></text>
				</view>
			</view>
			<view
				class="flex items-center mt-[30rpx] class-item-wrap ml-[25rpx]"
				style="width: calc(100% - 50rpx)"
			>
				<uv-scroll-list :indicator="false" :style="{ width: '100%' }">
					<view
						v-for="(item, index) in classList"
						class="text-[24rpx] ml-[5rpx] mr-[5rpx] text-center relative overlayer"
						:style="{
							color: currentIndex === index ? '#fff' : '#919191',
							background: currentIndex === index ? '#2BA5E0' : '#F3F3F5',
						}"
						@tap="classTab(index)"
						mode="heightFix"
						style="height: 36rpx; line-height: 36rpx"
						:key="index"
					>
						{{ item.class_name }}
					</view>
				</uv-scroll-list>
				<!-- <view
					class="text-[24rpx] ml-2 text-center relative layer"
					:style="{
						color: classKey === 'classover' ? '#fff' : '#919191',
						background: classKey === 'classover' ? '#2BA5E0' : '#F3F3F5',
					}"
					@tap="classTab('classover')"
				>
					雏鹰起飞班
				</view> -->
			</view>
			<scroll-view
				class="w-full flex-1"
				style="height: calc(100% - 228rpx)"
				scroll-y
				v-if="thisPage === 1 && recordList.length"
				@scrolltolower="scrolltolower"
			>
				<view
					index="33"
					class="row-item-0"
					v-for="(item, index) in recordList"
					:key="index"
					@tap="toDetail(tabKey, item.plan_id)"
				>
					<view class="wrapper-3">
						<text index="31" class="caption font-bold">{{ item.title }}</text>
						<view class="group">
							<view
								index="22"
								:class="item.status == 0 || item.status == 1 ? 'title-wrapper' : 'title-wrapper-1'"
								>{{ getPlanStatusToTex(item.status) }}</view
							>
							<text index="30" class="caption-1">{{
								dayjs(item.start_time * 1000).format('YYYY年MM月DD日') +
								' - ' +
								dayjs(item.end_time * 1000).format('YYYY年MM月DD日')
							}}</text>
						</view>
						<view class="flex items-center mt-[20rpx]">
							<text class="text-[25rpx] text-[#34A4E2]">{{ item.join_total }}人已参与</text>
							<text class="text-[25rpx] text-[#919191] ml-2"
								>{{ item.total - item.join_total }}人待参与</text
							>
							<text class="text-[25rpx] text-[#46C853] ml-2"
								>{{ item.complete_total }}人已完成</text
							>
						</view>
					</view>
					<view
						index="32"
						:class="item.status == 0 || item.status == 1 ? 'wrapper-4' : 'wrapper-4'"
					>
						<text index="27" class="title-5">{{ parseInt(item.progress.toString(), 10) }}%</text>
						<text index="28" class="caption-2">完成率</text>
					</view>
				</view>
				<!-- <view index="33" class="row-item-0">
					<view class="wrapper-3">
						<text index="31" class="caption">三年级寒假共读计划</text>
						<view class="group">
							<view index="22" class="title-wrapper-1">已完成</view>
							<text index="30" class="caption-1">2023年11月20日-2024年4月30日</text>
						</view>
						<view class="flex items-center mt-[20rpx]">
							<text class="text-[25rpx] text-[#34A4E2]">15人已参与</text>
							<text class="text-[25rpx] text-[#919191] ml-2">12人待参与</text>
							<text class="text-[25rpx] text-[#46C853] ml-2">3人已完成</text>
						</view>
					</view>
					<view index="32" class="wrapper-4">
						<text index="27" class="title-5">No.41</text>
						<text index="28" class="caption-2">完成率80%</text>
					</view>
				</view>
				<view index="33" class="row-item-0">
					<view class="wrapper-3">
						<text index="31" class="caption">三年级寒假共读计划</text>
						<view class="group">
							<view index="22" class="title-wrapper-1">已完成</view>
							<text index="30" class="caption-1">2023年11月20日-2024年4月30日</text>
						</view>
						<view class="flex items-center mt-[20rpx]">
							<text class="text-[25rpx] text-[#34A4E2]">15人已参与</text>
							<text class="text-[25rpx] text-[#919191] ml-2">12人待参与</text>
							<text class="text-[25rpx] text-[#46C853] ml-2">3人已完成</text>
						</view>
					</view>
					<view index="32" class="wrapper-5">
						<text index="27" class="title-5">No.41</text>
						<text index="28" class="caption-2">完成率100%</text>
					</view>
				</view> -->
			</scroll-view>
			<view class="mt-[150rpx]">
				<no-page
					v-if="thisPage === 0 || (thisPage === 1 && !recordList.length)"
					height="100%"
					:type="thisPage === 0 ? 'btn' : 'msg'"
					:title="title"
					@click="retry"
				></no-page>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getClassListApi, getPlanRecordList } from '@/service/plan';
import { initializeApp } from '@/utils';
import { systemInfo } from '@/utils/getSystemInfo';
import dayjs from 'dayjs';
import { getPlanStatusToTex } from '@/utils';
const { contentHeight } = systemInfo();
const tabKey = ref('underway'); // over
const pantForm = ref(1); //1平台，2班级

const currentIndex = ref(0);
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const recordList = ref([]);
const title = ref('');
const query = ref({
	id: 0,
	type: 1,
});
const changeTab = (key: string) => {
	tabKey.value = key;
	key == 'underway' ? (pantForm.value = 1) : (pantForm.value = 2);
	query.value.type = pantForm.value;
	getList();
};
const classTab = (ind: number) => {
	currentIndex.value = ind;
	query.value.id = classList.value[ind].id;
	getList();
};
const classList: any = ref([]);
const getClassList = () => {
	return new Promise(async (resolve, reject) => {
		try {
			const res = await getClassListApi();
			if (res.status_code === 200) {
				const resData = res.data;
				classList.value = resData;
				query.value.id = classList.value[currentIndex.value].id;
				resolve(true);
				// console.log('========>currentIndex', currentIndex.value);
			} else {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					title: res.message || '获取失败~',
				});
				reject();
			}
		} catch (error) {
			// console.log('========>getPlanPlanformListerror', error);
			uni.hideLoading();
			reject();
		}
	});
};

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};
const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	console.log('========>getList', page.value.number, query.value.id, query.value.type);
	try {
		const res: any = await getPlanRecordList({
			page: page.value.number,
			id: query.value.id,
			type: query.value.type,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			recordList.value =
				page.value.number === 1 ? res.data.list : [...recordList.value, ...res.data.list];
			if (res.data.list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!recordList.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
const toDetail = (type: any, id: string) => {
	let url = '';
	if (type == 'underway') {
		url = '/pages/pages-readingPlan/readingPlan-beiyueDetails/index';
	} else {
		url = '/pages/pages-readingPlan/readingPlan-studentDetails/index';
	}
	uni.navigateTo({
		url: `${url}?plan_id=${id}`,
	});
};
onLoad(option => {
	console.log('========>onLoad', option);
	query.value.type = option.type;
	option.type == 1 ? (tabKey.value = 'underway') : (tabKey.value = 'over');
});
onShow(() => {
	getClassList().then(() => {
		initializeApp(getList());
	});
});
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	height: 100vh;
	background-color: rgb(249 249 249 / 100%);
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.overlayer {
	height: 45rpx;
	padding: 0 20rpx;
	line-height: 45rpx;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 45rpx;
}

.layer {
	height: 45rpx;
	padding: 0 20rpx;
	line-height: 45rpx;
	background-color: rgb(242 243 245 / 100%);
	border-radius: 45rpx;
}

.row-item-0 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 700rpx;
	height: 220rpx;
	margin: 32rpx 0 0 25rpx;
	background-color: #fff;
	border-radius: 31.25rpx;
	box-shadow: 0 5rpx 21rpx rgb(0 0 0 / 7%);
}

.wrapper-3 {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	justify-content: flex-start;
	width: 480rpx;
	height: 220rpx;
	margin-left: 20rpx;
	overflow: hidden;

	.caption {
		align-self: flex-start;
		margin-top: 30rpx;
		overflow: hidden;
		font-size: 30rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.group {
		display: flex;
		flex-direction: row;
		align-self: flex-start;
		justify-content: space-between;
	}

	.title-wrapper {
		display: flex;
		flex-direction: row;
		align-self: flex-start;
		justify-content: center;
		height: 35rpx;
		padding: 0 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		font-size: 24rpx;
		line-height: 35rpx;
		color: #fff;
		background-color: #2ba5df;
		border-radius: 10rpx;
	}

	.title-wrapper-1 {
		display: flex;
		flex-direction: row;
		align-self: flex-start;
		justify-content: center;
		height: 35rpx;
		padding: 0 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		font-size: 24rpx;
		line-height: 35rpx;
		color: #fff;
		background-color: #ababab;
		border-radius: 10rpx;
	}

	.caption-1 {
		align-self: flex-start;
		font-size: 22rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		white-space: nowrap;
	}

	.title-4 {
		align-self: flex-start;
		margin: 50rpx 0 0 1rpx;
		overflow: hidden;
		font-size: 25rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(51 163 225 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: pre;
	}
}

.wrapper-4 {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 140rpx;
	height: 140rpx;
	padding: 0;
	margin: 40rpx 40rpx 0 0;
	background-color: #2ba5df;
	border-radius: 140rpx;
}

.wrapper-5 {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 140rpx;
	height: 140rpx;
	padding: 0;
	margin: 40rpx 40rpx 0 0;
	background-color: #fccb26;
	border-radius: 140rpx;
}

.title-5 {
	align-self: center;
	margin-top: 22rpx;
	overflow: hidden;
	font-size: 34rpx;
	font-style: normal;
	line-height: 48rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption-2 {
	align-self: center;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 25rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.class-item-wrap {
	:deep(.uv-scroll-list) {
		width: 100%;
	}
	.overlayer {
		margin-right: 10rpx;
		word-break: keep-all;
	}
}
</style>
